<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
        />
        <title>translate3D错位移动-2</title>
        <style type="text/css">
            html {
                overflow: hidden;
                height: 100%;
            }

            body {
                /* 视差元素的父级需要3D视角 */
                perspective: 1px;
                /* transform-style: preserve-3d; */
                height: 100%;
                overflow-y: scroll;
                overflow-x: hidden;
            }
            #app {
                transform-style: preserve-3d;
                width: 100vw;
                height: 200vh;
                /* background: skyblue; */
                padding-top: 100px;
            }
            .one {
                width: 500px;
                height: 200px;
                background: #409eff;
                transform: translate3d(50%, 50%, 0px);
                margin-bottom: 50px;
                opacity: 0.7;
            }
            .two {
                width: 500px;
                height: 200px;
                background: #67c23a;
                transform: translate3d(50%, -100%, -1px) scale(2);
                margin-bottom: 150px;
                opacity: 0.7;
            }
            .three {
                width: 500px;
                height: 200px;
                background: #e6a23c;
                transform: translate3d(50%, -200%, -2px) scale(3);
                margin-bottom: 150px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="one">one</div>
            <div class="two">two</div>
            <div class="three">three</div>
        </div>
    </body>
</html>
